import React, { memo, useEffect, useState } from "react";
import { DjCategoryWrap } from "./style";
import { getSizeImage } from "@/utils/format-utils";
import { NavLink } from "react-router-dom";
import { getDjRadioRecommend } from "@/services/djradio";

export default memo(function DjCategory(props) {
  const [data, setData] = useState(null);

  useEffect(() => {
    getDjRadioRecommend(props.categoryId).then((res) => {
      setData(res);
    });
  }, [props]);

  return (
    <DjCategoryWrap>
      <div className="dj-category-t-box">
        <div className="line-box">
          <p>
            {props.text}
            <span className="pointer">●</span>电台
          </p>
          <NavLink
            to={{
              pathname: "/discover/djradio/category",
              search: "?id=" + props.categoryId,
            }}
          >
            更多&gt;
          </NavLink>
        </div>
        {data !== null
          ? data.djRadios.slice(0, 4).map((item, index) => {
              return (
                <div className="dj-category-box" key={index}>
                  <div
                    className="fl"
                    style={{ height: "120px", width: "120px" }}
                  >
                    <img src={getSizeImage(item.picUrl, 120)} alt="" />
                  </div>
                  <div className="dj-cnt fl">
                    <NavLink
                      to={{
                        pathname: "/djradio",
                        search: "?id=" + item.id,
                      }}
                      className="dj-cnt-name"
                    >
                      {item.name}
                    </NavLink>
                    <span className="dj-cnt-rcmdtext">{item.rcmdtext}</span>
                  </div>
                </div>
              );
            })
          : ""}
      </div>
    </DjCategoryWrap>
  );
});
